<template>
  <div>
      <header-el-menu :category-list="this.categoryList" @queryParam="queryData"></header-el-menu>
      <div class="detailMain">
        <div class="left">
          <el-breadcrumb class="myBreadcrumb" separator="/" >
            <el-breadcrumb-item :to="{ path: '/blogList'}" @click.native="queryData" >首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item,id) in breadcrumb" :key="id" :to="{ path: '/blogList',query:{categoryId: item.categoryId}}" @click.native="queryData">{{item.categoryName}}</el-breadcrumb-item>
          </el-breadcrumb>
          <my-detail-newshow :blogs="this.blogs" @queryParam="queryData"></my-detail-newshow>
          <my-pagination class="pageDiv"
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getData"
          />
        </div>
        <div class="right">
          <my-index-usershow :usershow = "this.usershow"></my-index-usershow>
          <my-contact></my-contact>
        </div>
      </div>
  </div>
</template>

<script>
import headerElMenu from "./components/content/header/headerElMenu";
import myIndexUsershow from "./components/content/main/myIndexUsershow";
import myDetailNewshow from "./components/content/blogdetail/myDetailNewshow";
import myContact from "./components/content/contact/myContact";
import myPagination from "@/components/Pagination/myPagination";
import { listBlogFromIndex} from "@/api/blog/blog";
import {getCategoryNameById,getParentById} from "./utils/getCategoryNameById.js";
//获得博客配置
import {listConfigByType } from "@/api/blog/config";
import {getUserConfig} from "./utils/getBlogConfig";


export default {
  name: "blogList",
  components: {
    headerElMenu,myIndexUsershow,myDetailNewshow,myContact,myPagination
  },
  data() {
    return {
      // 总条数
      total: 0,
      breadcrumb: [],
      blogs: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderBy: 'update_time desc',
        categoryId: '',
        categoryFlag: true
      },
      categoryList: null,
      usershow:null,
    }
  },
  created() {
    if(this.$route.query.categoryId !== undefined){
      this.queryParams.categoryId = this.$route.query.categoryId;
    }
    this.getData();
  },
  methods: {
    getData(){
      listConfigByType(1).then(response =>{
        this.usershow = getUserConfig(response.rows);
      });

      listBlogFromIndex(this.queryParams).then(response => {
          if(response.code === 200){
            if(this.queryParams.categoryFlag)
              this.categoryList = response.data.categoryList;
            var data = response.data.blogList;
            this.blogs = [];
            for(let i = 0; i < data.length; i++){
              var blog = {
                blogId:data[i].blogId,
                img: data[i].coverImgUrl,
                time: data[i].updateTime,
                category: getCategoryNameById(data[i].categoryId,this.categoryList),
                categoryId: data[i].categoryId,
                title: data[i].title,
                contail: data[i].introduction,
                likeCount: data[i].likeCount
              }
              this.blogs.push(blog);
            }
            this.total = response.data.total;
            this.queryParams.categoryFlag = false;
          }else{
            this.$modal.msgError(response.msg);
          }

        if(this.$route.query.categoryId !== undefined){
          this.breadcrumb = getParentById(this.$route.query.categoryId,this.categoryList);
        }else{
          this.breadcrumb = [];
        }
      })

    },
    queryData(){
      this.queryParams.categoryId = this.$route.query.categoryId;
      this.getData();
    },

  }
}
</script>

<style scoped>
.el-container {
  margin: auto;
  max-width: 1600px;
  min-width: 1000px;
}
.detailMain{
  display: flex;
}
.left{
  height: auto;
  width: 70%;
}
.right{
  height: auto;
  width: 30%;
  margin-top: 10px;
}
.myBreadcrumb{
  margin: 10px 10px 10px 10px;
}
.pageDiv{
  width: auto;
}
</style>
